<template>
  <div class="app-container">
    <div class="calendarMain" v-loading="PageLoading">
      <h3 style="border-bottom:1px solid #ddd;padding-bottom:20px;">表单管理
        <el-button-group class="filter-item" style="margin-left:30px;">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-refresh"
            @click="fetchData"
          >
            刷新
          </el-button>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
          >
            新增表单
          </el-button>
        </el-button-group>
      </h3>
      <div class="week-main" v-for="(item,idx) in list">
        <el-descriptions :title="item.star_time" direction="vertical" :column="4" border>
          <el-descriptions-item label="创建日期">{{ item.dateline }}</el-descriptions-item>
          <el-descriptions-item label="标题">
            <el-tag>{{ item.title }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="操作"><span class="edit" @click="go(item.id)">查看反馈</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="dateParms.page"
      :limit.sync="dateParms.limit"
      @pagination="fetchData"
    />
  </div>
</template>

<script>
import { getForm } from '@/api/wz'

export default {
  data() {
    return {
      PageLoading: true,
      list: [],
      total: 0,
      dateParms: {
        limit: 20,
        page: 1
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    go(id) {
      if (id == 4) {
        this.$router.push({ path: '/form/form-view', query: { form_id: id } })
      } else {
        this.$router.push({ path: '/form/form-view', query: { form_id: id } })
      }

    },
    fetchData() {
      this.PageLoading = true
      getForm(this.dateParms).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.PageLoading = false
      }, data => {
        this.PageLoading = false
      })
    }
  }
}
</script>
<style lang="scss">
.w-e-text-container {
  a {
    color: #336699;
  }
}

.calendarMain {
  padding: 0 20px;

  .el-calendar-day {
    height: 110px;
  }

  .el-calendar__title {
    font-size: 18px;
    font-weight: bold;
    color: #20a0ff;
  }

}

</style>
<style lang="scss" scoped>
.tools {
  overflow: auto;
  height: 600px;

  &::-webkit-scrollbar {
    width: 3px;
    height: 1px;
  }

  &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    //border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #aaa;
  }

  &::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    //border-radius: 10px;
    background: #fefefe;
  }
}

.echats {
  .lable {
    padding: 10px 0;
    color: orange;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
  }

  .fromitem {
    display: flex;
    align-items: center;
    margin-right: 50px;
    margin-bottom: 20px;

    .labes {
      width: 100px;
      text-align: right;
      margin-right: 10px;
    }
  }
}

.calendarMain {
  overflow: auto;

  .week-main {
    padding: 20px 0;
    max-width: 800px;
    border-bottom: 1px solid #eee;

    .edit, del {
      margin: 0 10px;
      cursor: pointer;
    }

    .edit {
      color: #20a0ff;
    }

    .del {
      color: orange;
    }
  }

  &::-webkit-scrollbar {
    width: 3px;
    height: 1px;
  }

  &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    //border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #aaa;
  }

  &::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    //border-radius: 10px;
    background: #fefefe;
  }
}

.edit-main {
  height: 500px;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 3px;
    height: 1px;
  }

  &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    //border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #aaa;
  }

  &::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    //border-radius: 10px;
    background: #fefefe;
  }
}

.calendarMain {
  .calendarBox {
    width: 100%;
    height: 100%;
    position: relative;

    &:hover {
      .itemPlus {
        display: block;
      }
    }

    .itemPlus {
      color: #ed883f;
      position: absolute;
      top: 0px;
      right: 5px;
      text-align: right;
      font-size: 12px;
      display: none;
    }

    .item {
      padding: 5px;
      font-size: 12px;
      text-align: justify;
      border-radius: 5px;
      color: #409EFF;
      background: #ecf5ff;

      &:hover {
        color: #ed883f;
      }
    }
  }
}
</style>
